<style lang="less" scoped>
  .f-w70 {
    width: 70%;
  }
</style>

<template>
  <div>
    <div>
      <ue-search-bar ref="ueSearchBar" v-model="searchForm" :data="querys" label-width="120px">
      </ue-search-bar>
      <div>
        <el-button style="margin-bottom: 10px" type="primary" class="f-wa f-fr f-ml10 f-mr20"
                   @click="$refs.ueSearchBar.reset()">重置
        </el-button>
        <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20"
                   @click="searchOrders">查询
        </el-button>
      </div>
    </div>
    <div>
      <el-table
        :data="orderRecord"
        border max-height="680"
        style="width: 100%">
        <el-table-column
          type="index"
          width="70">
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单编号"
          width="180">
          <template slot-scope="scope">
            <div slot="footer" class="f-fr">
              <!--<el-button class="f-wa" type="text" @click="selectOrderClick(scope.row.orderId)">-->
                <!--{{scope.row.orderNumber}}-->
              <!--</el-button>-->
              <a  style="text-decoration: underline;color: #20A0FF;"  @click="selectOrderClick(scope.row.orderId)">{{scope.row.orderNumber}}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="propertyName"
          label="修改项"
          width="180">
        </el-table-column>
        <el-table-column
          prop="oldValueName"
          label="修改前"
          width="180">
        </el-table-column>
        <el-table-column
          prop="newValueName"
          label="修改后">
        </el-table-column>
        <el-table-column
          prop="receptionDescribe"
          label="修改描述">
        </el-table-column>
        <el-table-column
          prop="receptionType"
          label="修改类型">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="修改时间">
        </el-table-column>
        <el-table-column
          prop="createUserName"
          label="修改人">
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="float: right">
        </el-pagination>
      </el-col>
    </div>
    <!--订单查看Dialog-->
    <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
      <order-select :title="orderSelectForm"></order-select>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderReceptions } from '../../api/order/receptionEntering.js';
import OrderSelect from './OrderSelectDialog.vue';
export default{
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      searchForm: {},
      orderSelectForm: {},
      orderSelect: false,
      searchFreightContractForm: {},
      orderRecord: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    };
  },
  methods: {
    selectOrderClick (val) {
      this.orderSelect = true;
      this.orderSelectForm = {id: val};
    },
    /**
       * 多条件检索订单信息
       */
    searchOrders () {
      let filters = '';
      let o = this.searchForm;
      if (o.GT_createDate) {
        o.GT_createDate = o.GT_createDate.substr(0, 10);
        filters = 'GT_createDate=' + o.GT_createDate + ';';
      }
      if (o.LT_createDate) {
        o.LT_createDate = o.LT_createDate.substr(0, 10);
        filters = filters + 'LT_createDate=' + o.LT_createDate + ';';
      }
      if (o.LIKE_memberUserName) {
        filters = filters + 'LIKE_order.memberUserName=' + o.LIKE_memberUserName + ';';
      }
      if (o.LIKE_orderNumber) {
        filters = filters + 'LIKE_order.orderNumber=' + o.LIKE_orderNumber + ';';
      }
      this.getOrderReceptions(filters);
    },
    /**
       * 修改历史记录
       */
    getOrderReceptions (filters) {
      getOrderReceptions(
        {
          filters: filters,
          sorts: '-createDate',
          size: this.pageSize,
          page: this.currentPage
        }
      ).then((res) => {
        this.orderRecord = res.data.detailModelList;
        this.currentPage = res.data.currPage;
        this.total = res.data.totalCount;
        this.pageSize = res.data.pageSize;
      });
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchOrders();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchOrders();
    }
  },
  mounted () {
    this.getOrderReceptions('');
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#default'] || [];
    }
  }
};
</script>
